import { useState } from 'react';
import Hr from './hr';



/**
 * 组标题,带有上下翻转
 * @param props 
 * @returns 
 */
export default function GroupTitleByupdown(
	{
		title,
		dir = true,
		onclick
	}: {
		title: string;
		dir?: boolean;
		onclick(v: boolean): void;
	}) {
	//图片方向
	const [direction, setDirection] = useState(dir);
	return <>
		<div className='v'>
			<div className='g'>
				<span className='title'>{title}</span>
				<div className='img' onClick={() => {
					setDirection(!direction);
					onclick(!direction);
				}} >
					<img className='img1' src={direction ? '/images/down.png' : '/images/up.png'} />
				</div>
			</div>
			<Hr />
			<style jsx>{`
.v{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items:flex-start ;
width: 100%;
margin-top: 1rem;
}
.g{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.title{
font-size: 0.75rem;
text-align: center;
color: #505D68;
margin-bottom: -0.3rem;
margin-left: 1rem;
}
.img{
display: flex;
flex-direction: row;
justify-content:center;
align-items: center;
height: 1.5rem;
 width: 2rem;
margin-bottom: -1rem;
margin-right: 0.4rem;
}
.img1{
width: 0.875rem;
 height: 0.5rem;
}
`}</style>
		</div>
	</>;
}
